<style>
    .layui-form-label{
        width: 120px!important;
    }
</style>
<div style="margin: 5% 5%;  ">
    <form class="layui-form" action="" lay-filter="example">

        <div class="layui-form-item ">
            <div class="layui-inline">
                <label class="layui-form-label">主题名称:</label>
                <div class="layui-input-inline">
                    <input type="text"  name="themeName" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
        </div>

        <!--<div class="layui-form-item ">-->
            <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">所属分组:</label>-->
                <!--<div class="layui-input-inline">-->
                    <!--&lt;!&ndash;<input type="text"  name="themeGroup" autocomplete="off" class="layui-input" value="">&ndash;&gt;-->
                    <!--<select name="themeGroup">-->

                    <!--</select>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form-item " style="display: none;">
            <div class="layui-inline">
                <label class="layui-form-label">所属站点:</label>
                <div class="layui-input-inline">
                    <input type="text"  name="themeStation" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
        </div>

        <div class="layui-form-item ">
            <div class="layui-inline">
                <label class="layui-form-label">主题图片:</label>
                <div class="layui-input-inline">
                    <img id="headImg" src="" width="100px" height="100px">
                    <!--<input type="text" id="headImg"  name="themeGroup" autocomplete="off" class="layui-input" value="">-->
                </div>
            </div>
        </div>

        <div class="layui-form-item ">
            <div class="layui-inline">
                <label class="layui-form-label">主题状态:</label>
                <div class="layui-input-inline">
                    <select name="themeStatus" >
                        <option value="启用" >启用</option>
                        <option value="禁用" >禁用</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item " style="display: none;">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="themeImage" class="layui-input" value="">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" id="btnAdd" lay-filter="demo1">新增</button>
                <button type="button" class="layui-btn" id="btnQuxiao">取消</button>
            </div>
        </div>

    </form>
</div>
<!--<script src="js/jquery-1.12.4.js"></script>-->
<!--<script src="../../layui.js"></script>-->
<script>

    var fileName = null;

    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , upload = layui.upload;

        //文件上传
        // var upload = layui.upload;

        upload.render({
            elem:'#headImg',
            method: 'post',
            url: "/admin/fileinfo/upload/image",
            choose:function(obj)
            {
                fileName = null;
                //预览
                obj.preview(function(index, file, result){
                    //$("#headImg").attr('src',result);
                    document.getElementById("headImg").src = result;
                });
            },
            done:function(res, index, upload) //上传完成
            {
                fileName = res.data; //传回来的新的文件名
                $("input[name=themeImage]").attr("value",fileName);
            }

        });

      $("#btnQuxiao").click(function () {
          location="#/layui/layer";
          return false;
      })


        $("#btnAdd").click(function () {
            var adddata={
                "themeStation": $("input[name='themeStation']").val(),
                "themeName": $("input[name='themeName']").val(),
                "themeImage": fileName,
                "themeStatus": $("select[name='themeStatus']").val()
            }
            $.ajax({
                url: "/admin/theme/add/theme",
                type: 'POST',
                dataType: "JSON",
                contentType: "application/json;charset=utf-8",
                //themeName  themeStation themeImgage themeStatus
                data: JSON.stringify(adddata),
                success: function (res) {
                    if (res.code == 500) {
                        layer.msg("新增失败\t" + res.msg, {icon: 5, time: 1000});//失败的表情
                        return;
                    } else if (res.code == 200) {
                        layer.msg("新增成功", {
                                icon: 6,//成功的表情
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }
                            // ,function () {
                            //     location.reload();
                            // }
                        );
                    }
                },
                complete: function () {
                    layer.close(this.layerIndex);
                }
            })
            return false;
        })

        /* form.on('submit(demo1)',function (data) {
             alert("lll")
          /* console.log(data);
             console.log("data:"+data);

             $.ajax({
                 url: "/admin/theme/add/theme",
                 type: 'POST',
                 dataType: "JSON",
                 contentType:"application/json;charset=utf-8",
                 data:JSON.stringify(data.field),
                 success: function (res) {
                 console.log(res)
                     console.log("res:"+res)

                     if (res.code == 500) {
                         layer.msg("新增失败\t"+res.msg, {icon: 5,time: 1000});//失败的表情
                         return;
                     } else if (res.code == 200) {
                         layer.msg("新增成功", {
                             icon: 6,//成功的表情
                             time: 1000 //1秒关闭（如果不配置，默认是3秒）
                         }
                         // ,function () {
                         //     location.reload();
                         // }
                         );
                     }
                 },
                 complete: function () {
                     layer.close(this.layerIndex);
                 },
             });
            return false;//阻止表单跳转
        });*/

    });

    /**
     * 获取当前的站点所有分组列表
     */
    // $.ajax({
    //     type: 'GET',
    //     url: '/admin/group/stationGroup?stationId='+json.id,
    //     success: function (data) {
    //         $.each(data.data, function (key, val) {
    //             console.log(val)
    //             var option1 = $("<option>").val(val.groupId).text(val.groupName);
    //             $("select[name='themeGroup']").append(option1);
    //         });
    //         layui.form.render('select');
    //     }
    // });

    function GetRequest() {
        var url = decodeURI(location.search); //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    var json=GetRequest();
    $("input[name='themeStation']").attr("value",json.id)

</script>